import React, { Component } from 'react'
import { Card, Form, Input, Checkbox, Button } from 'antd'
import 'style/Login.css'
import logo from 'assets/logo192.png'
import { userlogin } from 'api/user'
export default class login extends Component {
    render() {
        return (
            <div className='login'>
                <Card className="login-container">
                    <img className="login-logo" src={logo} alt="" />
                    <Form name="basic" size="large" initialValues={{
                        mobile: '13911111111',
                        code: '246810',
                        remember: true
                    }} onFinish={this.Login}>
                        <Form.Item name="mobile" rules={[
                            { pattern: /^1[3-9][0-9]{9}$/, message: '手机号码格式错误' },
                            { required: true, message: '手机号码不能为空' }
                        ]}>
                            <Input placeholder="请输入手机号码" />
                        </Form.Item>

                        <Form.Item name="code" rules={[
                            { pattern: /^[0-9]{6}$/, message: '验证码格式错误' },
                            { required: true, message: '验证码不能为空' }
                        ]}>
                            <Input.Password placeholder="请输入验证码" />
                        </Form.Item>

                        <Form.Item name="remember" valuePropName="checked" rules={[
                            { validator: (_, value) => { return value ? Promise.resolve() : Promise.reject('请同意用户协议和隐私条款') } }
                        ]}>
                            <Checkbox>我已阅读并同意[用户协议]和[隐私条款]</Checkbox>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" block>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>

            </div>
        )
    }
    Login = async (value) => {
        const res = await userlogin(value)
        localStorage.setItem('token', res.data.token)
        this.props.history.push('/')
    }
    componentDidMount() {
        console.log(this.props);
    }
}
